<template>
    <div class="imageSettingMain">
        <div class="textContent">
            <p>文本内容：{{recognizedText}}</p>
        </div>
        <div class="colorOrThreshold options"> <!-- 颜色或阈值 -->
            <div class="singleItem">
                <input type="radio" name="colorOrThreshold" :checked="colorEnabled" @change="RadioOnChange(0)">
                <p>彩色图片</p>
            </div>
            <div class="singleItem">
                <input type="radio" name="colorOrThreshold" @change="RadioOnChange(1)">
                <p>阈值图片</p>
            </div>
        </div>
        <div class="normalOrAdaptiveThreshold options"> <!-- 颜色或阈值 -->
            <div class="singleItem">
                <input type="radio" name="normalOrAdaptiveThreshold" :checked="colorEnabled" @change="NormalOrAdaptiveThresholdRadioOnChange(0)">
                <p>普通阈值</p>
            </div>
            <div class="singleItem">
                <input type="radio" name="normalOrAdaptiveThreshold" @change="NormalOrAdaptiveThresholdRadioOnChange(1)">
                <p>自适应阈值</p>
            </div>
        </div>
        <div class="thresholdOptions options">
            <div class="singleItem">
                <p>影像最小值（C）：</p>
                <input type="number" placeholder="影像最小值" v-model="minImageValue"
                       @change="ThresholdOnChange" min="0" max="255">
            </div>
            <div class="singleItem">
                <p>影像最大值：</p>
                <input type="number" placeholder="影像最大值" v-model="maxImageValue"
                       @change="ThresholdOnChange" min="0" max="255">
            </div>
        </div>
        <div class="imageSettingCover" v-show="spinBoxShow">
            <a-spin size="large"></a-spin>
        </div>
    </div>
</template>

<script setup>
import {ref} from 'vue'
import {store} from '../store'
import {WebSocketManager} from "@/typescript/utils/connection/WebSocketManager.js";
import {GetImageFromBase64} from "@/typescript/utils/image/GetImageFromBase64.js";
import {ImageAndShapeViewer} from "@/typescript/utils/ImageAndShapeViewer/ImageAndShapeViewer.js";
const colorEnabled = ref(true), normalThreshold = ref(true);

let recognizedText = ref('');
let spinBoxShow = ref(false);
let minImageValue = ref(0);
let maxImageValue = ref(255);

const SetSpinBoxState = (bool) => {
    spinBoxShow.value = bool;
    if (bool) {
        recognizedText.value = '';
    }
}

let UpdateImageByOptions = async () => {
    if (store.socketManager !== undefined && store.socketManager instanceof WebSocketManager) {
        await store.socketManager.RestartWebSocket();

        let imageContent = JSON.stringify({id: 'handleImage', colorEnabled: colorEnabled.value,
            min: minImageValue.value, max: maxImageValue.value, normalThreshold: normalThreshold.value});
        let result0 = await store.socketManager.SendTextToWebSocket(imageContent);
        let image0 = await GetImageFromBase64(result0);

        if (store.imageViewer !== undefined && store.imageViewer instanceof ImageAndShapeViewer) {
            store.imageViewer.Render(image0);
        }
        console.log(image0, '影像生成完毕');
    }
}

/** 颜色显示方式选项发生变化 */
let RadioOnChange = async (id) => {
    colorEnabled.value = id === 0;
    await UpdateImageByOptions();
}

/** 阈值显示方式发生变化 */
let NormalOrAdaptiveThresholdRadioOnChange = async (id) => {
    normalThreshold.value = id === 0;
    await UpdateImageByOptions();
}

let ThresholdOnChange = async () => {
    await UpdateImageByOptions();
}

defineExpose({recognizedText, SetSpinBoxState});
</script>

<style lang="less" scoped>
    .imageSettingMain {
        & p {
            margin: 0; padding: 0;
            color: black; user-select: none;
        }

        width: 100%; height: 100%;
        position: relative; background: #deebf5;
        padding: 1rem;

        display: flex;
        flex-direction: column;
        align-items: center;

        & > div {
            width: 100%;
            padding: 1rem;
        }

        & > .options {
            background: rgba(255, 255, 255, 0.8);
            border-radius: 0.4rem;
            margin: 0.5rem 0;
        }

        & > .colorOrThreshold, & > .normalOrAdaptiveThreshold {
            display: flex;
            justify-content: space-evenly;
            & > .singleItem {
                display: flex;
            }
        }

        & > .thresholdOptions {
            & > .singleItem {
                display: flex;
                justify-content: space-evenly;
                padding: 0.5rem 0;
            }
        }

        & > .imageSettingCover {
            width: 100%; height: 100%;
            position: absolute;
            left: 0; top: 0;
            backdrop-filter: blur(10px);
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
</style>